<template>
	<view class="">
		<view class="">
			<view class="but_css" @click="generatorScoreMethod" type="primary">生成学期成绩</view>
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose"  mode="input" title="学期作业成绩名称" value=""
					placeholder="请输入学期作业成绩名称" @confirm="confirm"></uni-popup-dialog>
			</uni-popup>
		</view>
		<view>
			<view class="list_end_css" v-for="(item,index) in tableData" :key="index">
				<checkbox-group>
					<label class="flex">
						<checkbox :value="index" :checked="item.checked" @click="handleSelectionChange(index)" />
						<view class="list_p">序号：{{index+1}}</view>
					</label>
				</checkbox-group>

				<view class="list_p">作业名称：{{item.workName}}</view>
				<view class="list_p">下发时间：{{item.startTime}}</view>
				<view class="list_p">结束时间：{{item.endTime}}</view>
				<view class="list_p">作业说明：{{item.remark}}</view>
				<view class="list_p flex">状态：
					<view v-if="item.isUsed == 1" style="color: red;"> 已生成 </view>
					<view v-else style="color: green;"> 可用 </view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				pageNo: 1,
				pageSize: 5,
				total: 0,

				dialogVisible: false,

				selected: [],

				termWorkName: ""
			};
		},
		created() {
			this.getWorkListTea();
		},
		onReachBottom() {
			this.pageNo +=1
			this.getWorkListTea();
		},
		methods: {
			checkboxSelect(row, rowIndex) {
				//绑定参数表格禁用
				return row.isUsed != 1 //当满足什么条件时启用
			},
			confirm(val) {
				this.$refs.inputDialog.close()
				this.termWorkName = val
				this.generaTermWorkScore();
			},
			getWorkListTea() {
				this.workName = ''
				const {
					pageNo,
					pageSize,
					workName
				} = this;
				this.pyReq(
					this.$http.getWorkListTea, {
						pageNo,
						pageSize,
						workName
					},
					(res) => {
						if (res.code == 0) {
							console.log('res',res)
							this.tableData = this.tableData.concat(res.result.records);
							this.tableData.forEach((item, index) => {
								item.checked = false
							});
							this.total = res.result.total;
						}
					}
				);
			},

			generaTermWorkScore() {
				const {
					termWorkName,
					workIds
				} = this;
				this.pyReq(
					this.$http.generaTermWorkScore, {
						termWorkName,
						workIds
					},
					(res) => {
						if (res.code == 0) {
							this.getWorkListTea();
						}
					});
			},
			handleSizeChange(pageSize) {
				this.pageSize = pageSize;
				this.getWorkListTea();
			},
			handleCurrentChange(currentPage) {
				this.pageNo = currentPage;
				this.getWorkListTea();
			},
			// 选中的成绩
			handleSelectionChange(index) {
				if(this.tableData[index].checked){
					this.tableData[index].checked = false
				}else{
					this.tableData[index].checked = true
				}
				this.tableData.forEach((item, index) => {
					if(item.checked){
						this.selected.push({
							workId:item.workId
						})
					}
					
				});
				this.workIds = this.selected.map(item => "##" + item.workId).join("");
			},
			// 生成学期成绩
			generatorScoreMethod() {
				
				if (!this.selected.length) {
					uni.showToast({
						title: '请至少选中一个'
					})
					return;
				}
				this.$refs.inputDialog.open()
			}
		}
	};
</script>

<style lang="scss" scoped>
	.list_end_css {
		border: 1px solid #B31610;
		border-radius: 7px;
		margin: 5px;
		padding: 8px;
	}

	.but_css {
		background-color: rgb(166, 14, 10);
		margin: 10px;
		width: 100px;
		border-radius: 7px;
		color: #fff;
		line-height: 30px;
		text-align: center;
		font-size: 15px;
		padding: 8px;
	}

	.shangchuan_css {
		background-color: rgb(166, 14, 10);
		margin: 10px auto;
		width: 100px;
		border-radius: 7px;
		color: #fff;
		line-height: 30px;
		text-align: center;
		font-size: 15px;
	}

	.xuanze_css {
		width: auto;
		flex: 1;
		border: 1px solid #ddd;
		padding-left: 5px;
		height: 30px;
	}

	.radio_css {
		margin: 10px;
	}

	/deep/.uni-radio-input-checked {
		color: #B31610;
		background-color: #B31610 !important;
		border-color: #B31610 !important;
	}

	/deep/.uni-radio-input-checked::before {
		background-color: #B31610;
		color: #B31610;
	}

	.timu_css {
		line-height: 30px;
		font-size: 15px;
	}

	.timu_css_sed {
		display: flex;
		justify-content: space-between;
	}

	.timu_css_sed input {
		border: 1px solid #ddd;
		border-radius: 7px;
		width: 80%;
		padding-left: 5px;
		height: 30px;
	}

	.fenlei_title {
		padding: 0 5px;
		display: flex;
		justify-content: space-between;
	}

	.fenlei_h {
		font-size: 15px;
		line-height: 25px;
		margin-top: 5px;
		text-align: center;
	}

	.fenlei_h b {
		color: #B31610;
	}

	.fenlei_is_css {
		overflow: hidden;
		width: 80%;
		line-height: 25px;
		border: 1px solid #ddd;
		border-radius: 7px;
		padding-left: 5px;
		margin-top: 5px;
		height: 27px;
	}

	.exam-container {
		border: 1px solid #eee;
		border-radius: 10px;
		padding: 5px;
		width: 90%;
		margin: 5px auto;
	}

	.exam-list {
		text-align: left;
	}

	.exam-item {
		margin-bottom: 30px;
	}

	.flex {
		display: flex;
	}

	.exam-item-options,
	.exam-item-answers {
		display: flex;
		align-items: center;
	}

	.exam-item-answers {
		margin-top: 10px;
	}

	.exam-item-option {
		flex: 1;
		display: flex;
		align-items: center;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.exam-item-title {
		font-weight: bolder;
		font-size: 16px;
	}

	.exam-checkbox-group {
		display: flex;
		align-items: center;
	}

	.exam-checkbox {
		margin-right: 30px;
		width: 50px;


	}

	.el-checkbox__label {
		padding: 0;
	}

	.exam-radio-group {
		margin-left: -10px;
		display: flex;
		align-items: center;
	}

	.exam-radio {
		margin-right: 30px;
		width: 50px;
	}
</style>
